// 导航菜单项的数据类型定义
interface NavigationItem {
  // 图标（emoji）
  icon: string;
  // 显示文本
  label: string;
}

// 导航菜单组件：显示固定的导航选项
// 使用React 17+自动JSX运行时，无需显式导入React
export const NavigationMenu = () => {
  // 导航项配置数组：使用配置驱动避免重复代码
  const navigationItems: NavigationItem[] = [
    { icon: '🔗', label: 'To / Links' },
    { icon: '📋', label: 'Next' }
  ];

  return (
    // 导航菜单容器
    <nav className="mb-5 w-full min-w-0">
      {navigationItems.map((item, index) => (
        // 导航项：hover效果和点击态，确保宽度不超出容器
        <div 
          key={index}
          className="flex items-center gap-3 px-5 py-2 text-sm text-gray-700 cursor-pointer hover:bg-gray-50 transition-colors w-full min-w-0"
        >
          <span className="nav-icon">{item.icon}</span>
          <span className="nav-text truncate">{item.label}</span>
        </div>
      ))}
    </nav>
  );
};